<template>
    <div>
        分类：
        <el-select  v-model="query.category" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in categorys" :key="item" :label="item" :value="item"
    />
  </el-select>
  搜索：<el-input v-model="query.search" ></el-input>
  <el-button @click="searchFn">查询</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="proid" label="编号" width="150"/>
        <el-table-column prop="img1" label="图片" width="150">
            <template #default="scope">
                <img class="img" :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="category" label="种类" width="80"/>
        <el-table-column show-overflow-tooltip prop="desc" label="名称" width="250"/>
        <el-table-column prop="brand" label="品牌" width="80"/>
        <el-table-column prop="originprice" label="价格" width="80"/>
        <el-table-column prop="discount" label="折扣" width="80"/>
        <el-table-column prop="sales" label="销量" width="140"/>
        <el-table-column prop="stock" label="库存" width="80"/>
        <el-table-column prop="stock" label="是否推荐" width="180">
            
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </template>
           
        
        </el-table-column>
        
    </el-table>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
  
<script lang="ts" setup>
import { reactive,ref } from 'vue';

import service from '../../../utils/service';


const loading = ref(true)

const tableData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
//搜索
let categorys = reactive<string[]>([]);
const getCategory =()=>{
    service({
        url:"/pro/getCategory",
    }).then((res)=>{
        if(res.data.code==="200"){
            categorys.length = 0
            categorys.push(...res.data.data)
        }
    })
}
getCategory();
// 定义查询结果
interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
const list = reactive<IGoods[]>([]);
const query = reactive<{
    category?: string,
    search?: string
}>({
    category: "",
    search: ""
})




const searchFn = () => {
    service({
        url: "/pro/searchPro",
        method: "post",
        data: query
    })
        .then(res => {
            if (res.data.code === "200") {
                list.length = 0;
                list.push(...res.data.data);
                
            }
        })
}

searchFn(); 

</script>
  
<style scoped>
.img {
    width: 150px;
    height: 150px;
}
.el-input{
    width: 300px;
}
body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>